import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  TextInput,
  Text
} from 'react-native'

import NavBar from '../../../../components/PublicHeader';

export default class editingProfession extends Component {
  constructor(props) {
    super(props)
    this.state = {
      topTitle: "编辑职业", // 头部标题
      titleColor: "#333", // 标题颜色
      editingProfession: null, // 职业
      rightText: "完成", // 右边完成按钮
      editingProfession: this.props.navigation.state.params.editingProfession, // 原本的职业
    };
  }

  componentDidMount = () => { }
  // 职业 编辑保存方法
  uploadEditingProfession = () => {
    this.props.navigation.state.params.refresh(this.state.editingProfession)
    this.props.navigation.goBack()// 返回上一级
  }
  // 职业 修改方法
  onChangeText = (inputText) => {
    this.setState({
      editingProfession: inputText
    })
  }
  render() {
    return (
      <View style={styles.warperEditingProfession}>
        {/* 导航栏 */}
        <NavBar
          navigation={this.props.navigation}
          title={this.state.topTitle}
          titleColor={this.state.titleColor}
          right={this.state.rightText}
          pressRight={() => {
            this.uploadEditingProfession() // 完成 保存
          }}
        />
        <View style={styles.editingProfession}>
          {/* 职业 */}
          <View style={styles.editingProfessionBox}>
            <TextInput
              onChangeText={inputText => this.onChangeText(inputText)}
              maxLength={10}
              value={this.state.editingProfession}
              placeholder='请输入你要修改的职业'
              style={styles.editingProfessionInput} />
          </View>
          {/* 文本提示 输入格式 */}
          <Text style={styles.formatTips}>请输入你要修改的职业</Text>
        </View>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  warperEditingProfession: {
    flex: 1,
    backgroundColor: "rgba(240,240,240,0.3)",
  },

  editingProfessionBox: {
    height: 60,
    flexDirection: "row",
    alignItems: "center",
    marginTop: 20,
    width: "100%",
    backgroundColor: "#fff"
  },
  editingProfessionInput: {
    borderWidth: 0,
    paddingLeft: 15,
    width: "100%",
  },
  formatTips: {
    fontSize: 14,
    color: "#999",
    padding: 15
  },

})